<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter();
const inputVal = ref("");
defineProps(["hotArr"]);
const goMain = (id) => {
  window.open(`/main?id=${id}`, "_blank");
};
const goSearch = () => {
  if (inputVal.value != "" || inputVal.value.length > 0) {
    router.push(`/search${inputVal.value}`);
  }else{
    ElMessage.warning('请输入你需要搜索的内容')
  }
};
</script>

<template>
  <div class="hotUrl">
    <div class="search">
      <input type="text" name="" v-model.trim="inputVal" @keyup.enter="goSearch" />
      <div @click="goSearch">搜索</div>
    </div>

    <div class="hot">
      <div class="top">
        <i class="iconfont icon-remen"></i>
        <h3>热门网址</h3>
        <div class="line"></div>
      </div>

      <ul>
        <li v-for="item in hotArr" :key="item.id" @click="goMain(item.id)">
          <img :src="item.img" alt="" />
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
@import url("/src/assets/style/comStyle/hotUrl/hotUrl.scss");
</style>
